<template>
	<div class="flex col-center row-center">
		<div style="margin-top: 50px;">
			<el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
				<el-form-item label="原密码" prop="oldPassword">
					<el-input size="large" v-model="user.oldPassword" style="width: 560px;margin-bottom: 20px;"
						placeholder="请输入原密码" type="password" show-password />
				</el-form-item>

				<el-form-item label="新密码" prop="newPassword">
					<el-input size="large" v-model="user.newPassword" style="width: 560px;margin-bottom: 20px;"
						placeholder="请输入新密码" type="password" show-password v-show="false" />
					<checkPwd style="width: 560px;margin-bottom: 20px;" placeholder="请输入新密码" @sendData="refresh" />
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPassword">
					<el-input size="large" v-model="user.confirmPassword" style="width: 560px;" placeholder="请确认新密码"
						type="password" show-password />
				</el-form-item>
				<el-form-item>
				</el-form-item>
			</el-form>
			<div class="text-center" style="margin-top: 250px;">
				<el-button type="defaultBtn" style="width:88px;height: 32px;" @click="submit">保 存</el-button>
				<el-button type="operate"
					style="width: 88px;height: 32px;border: 1px solid #9BA2AB;color: #333;margin-left: 20px;"
					@click="reset">重 置</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	updateUserPwd
} from "@/api/system/user";
import checkPwd from "@/components/checkPwd/index.vue"

const {
	proxy
} = getCurrentInstance();
// const route = useRoute();
// const obj = Object.assign({}, route, {
// 	title: "修改密码"
// });
// proxy.$tab.updatePage(obj);
const user = reactive({
	oldPassword: undefined,
	newPassword: undefined,
	confirmPassword: undefined
});

const equalToPassword = (rule, value, callback) => {
	if (user.newPassword !== value) {
		callback(new Error("两次输入的密码不一致"));
	} else {
		callback();
	}
};
const rules = ref({
	oldPassword: [{
		required: true,
		message: "旧密码不能为空",
		trigger: "blur"
	}],
	newPassword: [{
		required: true,
		message: "新密码不能为空",
		trigger: "blur"
	}, {
		min: 6,
		max: 20,
		message: "长度在 6 到 20 个字符",
		trigger: "blur"
	}, {
		pattern: /^[^<>"'|\\]+$/,
		message: "不能包含非法字符：< > \" ' \\\ |",
		trigger: "blur"
	}],
	confirmPassword: [{
		required: true,
		message: "确认密码不能为空",
		trigger: "blur"
	}, {
		required: true,
		validator: equalToPassword,
		trigger: "blur"
	}]
});

/** 提交按钮 */
function submit() {
	if (!strengthRef.value) {
		proxy.$modal.confirm('密码强度太弱，请参考规则修改至强！').then(function () {
			return;
		})
		return;
	}
	proxy.$refs.pwdRef.validate(valid => {
		if (valid) {
			updateUserPwd(user.oldPassword, user.newPassword).then(response => {
				proxy.$modal.msgSuccess("修改成功");
			});
		}
	});
};
// 重置按钮
function reset() {
	user.oldPassword = ''
	user.newPassword = ''
	user.confirmPassword = ''
}
/** 关闭按钮 */
function close() {
	proxy.$tab.closePage();
};

const strengthRef = ref(false);
function refresh(password, strength) {
	strengthRef.value = strength;
	user.newPassword = password;
	console.log("user",user);
}
</script>